<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <style>
        .form-wrap{
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="form-wrap">
    <!-- 新增砍价商品的表单 -->
    <form id="cut_form" class="layui-form" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label">砍价商品</label>
            <div class="layui-input-block">
                <input id="commodityName_input" name="commodityName" type="text" class="layui-input">
            </div>
        </div>
        
        <div id="commodity_div" style="display:none" class="layui-form-item">
            <label class="layui-form-label" ></label>
    		<div class="layui-input-block" >
    		 	<select name="commodityId" id="commodity_select" lay-filter="commodity_select">
                </select>
    		</div>
        </div>
        
        <div class="layui-form-item">
	            <label class="layui-form-label">商品原价</label>
	            <div class="layui-input-block">
	                <input id="ori_price" name="oriPrice" type="text"  readonly="readonly" class="layui-input">
	            </div>
	    </div>
        
        <div class="layui-form-item">
	            <label class="layui-form-label">商品底价</label>
	            <div class="layui-input-block">
	                <input id="floor_price" name="floorPrice" type="text" class="layui-input">
	            </div>
	    </div>
	    
		<div class="layui-form-item">
	            <label class="layui-form-label">单次最多</label>
	            <div class="layui-input-block">
	                <input id="upper_limit" name="upperLimit" type="text" class="layui-input">
	            </div>
	    </div>
	    <div class="layui-form-item">
	            <label class="layui-form-label">单次最少</label>
	            <div class="layui-input-block">
	                <input id="lower_limit" name="lowerLimit" type="text" class="layui-input">
	            </div>
	    </div>
	    <div class="layui-form-item">
	            <label class="layui-form-label">可砍次数</label>
	            <div class="layui-input-block">
	                <input id="cut_count" name="cutCount" type="text" class="layui-input">
	            </div>
	    </div>

        <div class="layui-form-item">
	            <label class="layui-form-label">截止日期</label>
	            <div class="layui-input-block">
                	<input type="text" name="endTime" id="endTime" lay-verify="endTime" placeholder="yyyy-MM-dd HH:mm:ss" autocomplete="off" class="layui-input">
	            </div>
	    </div>
	    
        <div class="layui-form-item">
            <label class="layui-form-label">砍价状态</label>
            <div class="layui-input-block" style="width:12%">
                <select name="status">
						<option value="1">正常</option>
						<option value="0">下架</option>
						<option value="2">过期</option>
                </select>
            </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block"> 
                <button class="layui-btn" type="button" onclick="cutForm.submit()">提交</button>
            </div>
        </div> 
    </form>
</div>
	<script src="../../publicjs/jquery-1.8.0.min.js"></script>
	<script src="../../publicjs/smallkingutil.js"></script>
	<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form', 'laydate'], function(){
    var form = layui.form,
    	layer = layui.layer,
        laydate = layui.laydate;
    // 初始化layui的日期控件
    laydate.render({
        elem: '#endTime',
        type: 'datetime'
    });
	// 用户表单相关的操作对象
	window.cutForm = {
		// 监听输入框内容 
		inputChange: function(){
			var _this = this;
			$('#commodityName_input').on('input',function(){
				var keyword = this.value;
				if(!keyword){
					$("#commodity_div").hide();
					_this.commodityId = null;
				}else{
					_this.getCommodityList(keyword);
				}
			})
		},
		// 监听商品下拉框选择
		selectChange: function(){
			var _this = this;
			form.on('select(commodity_select)', function(data){
		    	  // 得到select的dom对象
		    	  var selectObj = data.elem;
		    	  var index = selectObj.selectedIndex; 
		    	  // 选中文本
		    	  var text = selectObj.options[index].text; 
		    	  // 选中值
		    	  var value = selectObj.options[index].value;
		    	  $("#commodityName_input").attr("value", text);
				  $("#commodity_div").hide();
				  _this.commodityId = value;
				  // 得到选中商品的价格 将其填充到表单
				  for(var i = 0; i < _this.commodityList.length; i ++){
					  if(_this.commodityList[i].commodityId == value){
				    	  $("#ori_price").attr("value", _this.commodityList[i].price);
						  break;
					  }
				  }
		    });
		},
		// 根据输入框的内容，查询后台的商品
		getCommodityList : function(keyword){
			var _this = this;
			
			var ajaxParam = {
				url : commonUtil.domain() +"/admin/mall/commodity/list",
				data : {
					keyword: keyword
				}
			}
			ajaxUtil.post(ajaxParam, function(data){
				if(data.data.length >= 1){
					_this.commodityList = data.data;
					$("#commodity_div").show();
					$('#commodity_select').html('');
					selectUtil.fillSelect($('#commodity_select'), data.data, "commodityId", "commodityName");
					form.render('select');
				}else{
					$("#commodity_div").hide();
					$('#commodity_select').html('');
					_this.commodityId = null;
				}
			});
		},
		submit : function() {
			var _this = this;
			// 先验证有没有选择商品
			var commodityId = this.commodityId;
			if(!commodityId && !commodityCutId){
				layer.msg("请选择砍价商品。");
				return;
			}
			// 根据商品可以砍价的总金额 砍价次数 单人上限，单人下限 生成砍价金额拼接成的数组
			var oriPrice = $("#ori_price").val();
			var floorPrice = $("#floor_price").val();
			var cutCount = $("#cut_count").val();
			var upperLimit = $("#upper_limit").val();
			var lowerLimit = $("#lower_limit").val();
			var cutForm = document.getElementById("cut_form");
			// 得到商品参数json
			var formData = new FormData(cutForm);
			var	url, msg;
			if(this.commodityCutId){
				url = commonUtil.domain() +"/admin/mall/cut/update";
				msg = "修改";
				formData.set("commodityCutId", this.commodityCutId);
			}else{
				url = commonUtil.domain() +"/admin/mall/cut/insert";
				msg = "新增";
				formData.set("commodityId", commodityId);
			}
			var ajaxParam = {
				url : url
			}
			ajaxUtil.submitForm(formData, ajaxParam, function(data) {
				if (data.code == 200) {
					// 关闭当前的表单弹窗 刷新父级页面的数据表格
					var parentHtml = window.parent;
					parentHtml.layer.closeAll();
					parentHtml.cutTable.refresh();
				} else if(data.code == 203) {
					layer.msg("当前商品已经已在砍价列表中");
				}else{
					layer.msg(msg + "商品失败，请联系开发人员。");
				}
			});
		}
	}
	
	var commodityCutId = commonUtil.getRequestParam("commodityCutId");
	// 给输入框和下拉框绑定监听事件
	cutForm.inputChange();
	cutForm.selectChange();
	if(commodityCutId){
		cutForm.commodityCutId = commodityCutId;
		// 请求后台得到当前修改的用户数据，将其显示在表单里
		var ajaxParam = {
			url : commonUtil.domain() +'/admin/mall/cut/detail',
			data : {
				commodityCutId : commodityCutId
			}
		}
		ajaxUtil.post(ajaxParam, function(data) {
			var commodity = data.data;
			formUtil.setForm($('#cut_form'), commodity);
	    	$("#ori_price").attr("value", commodity.commodityVo.price);
	    	$("#commodityName_input").attr("value", commodity.commodityVo.commodityName);
	    	$("#commodityName_input").attr("readonly", "readonly");
		});
	}
	
});

</script>
<script>
	$(function(){
				commonUtil.setMaxLength(40);
			})
</script>
</body>
